<template>
  <div class="wrapper" v-if="detail.id">
    <div class='top'>
      <h3 v-if="detail.out_status == 3">请审核退货信息</h3>
      <h3 v-if="detail.out_status == 1">审核通过，请等待买家发货</h3>
      <h3 v-if="detail.out_status == 2">审核不通过,原因：{{ detail.reason }}</h3>
      <h3 v-if="detail.out_status == 4">买家已发货</h3>
      <h3 v-if="detail.out_status == 5">退货已完成</h3>
      <!-- <h5>订单金额(含运费): ￥66.00</h5> -->
    </div>
    <Logistics v-if="logis" :logis="logis" />
    <OrderAddress
      v-if="detail.out_status == 1 || detail.out_status == 4 || detail.out_status == 5"
      :name="detail.addressname"
      :mobile="detail.mobile"
      :province="detail.province"
      :city="detail.city"
      :district="detail.district"
      :address="detail.address"
    />
    <div class="goods-list">
      <p class="title">有惊喜</p>
      <GoodsItem
        :title="detail.title"
        :guage="detail.name"
        :price="detail.pice"
        :count="Number(detail.out_num)"
        :img="detail.url"
      ></GoodsItem>
    </div>
    <div class="mid">
      <MsgItem title="退款总金额" :value="'￥' + (detail.pice * detail.out_num)"></MsgItem>
    </div>
    <!-- <div class="bottom">
      <p>订单编号：SH1565152165165</p>
      <p>创建时间：2019年10月22日15:36:32</p>
      <p>支付时间：2019年10月22日15:36:32</p>
    </div> -->
    <div class="return">
      <div class="return-item">
        <p>退款原因</p>
        <div class="text">{{ detail.out_reason }}</div>
      </div>
      <div class="return-item">
        <p>图片</p>
        <div class="img-wrapper">
          <div class="img" v-for="item of detail.imgArr" :key="item.id">
            <img :src="item.url" preview>
          </div>
        </div>
      </div>
      <template v-if="detail.out_status == 3">
        <div class="return-item">
          <p>审核原因</p>
          <input class="text" v-model="reason" placeholder="请输入审核原因">
        </div>
        <div class="return-item">
          <p>退货地址</p>
          <select v-model="address" class="text">
            <option value="">审核通过请点击选择收货地址</option>
            <option
              v-for="item of addressList"
              :key="item.id"
              :value="item.id"
            >
              {{ item.province }}{{ item.city }}{{ item.district }}{{ item.address }}
            </option>
          </select>
        </div>
        <div class="bar">
          <button class="reject" @click="submit(2)">拒绝</button>
          <button class="resolve" @click="submit(1)">同意</button>
        </div>
      </template>
    </div>
    <div class="bar" v-if="detail.out_status == 4">
      <button class="back" @click="confirm">确认收货</button>
    </div>
  </div>
</template>

<script>
  import _ from 'lodash'
  import GoodsItem from '@/components/goodsItem/GoodsItem.vue'
  import MsgItem from '@/components/msgItem/MsgItem.vue'
  import Logistics from '@/components/logistics/Logistics.vue'
  import OrderAddress from '@/components/orderAddress/OrderAddress.vue'
  import { mapState } from 'vuex'
  export default {
    name: 'MerchantOrderDetail',
    components: {
      GoodsItem,
      MsgItem,
      Logistics,
      OrderAddress
    },
    created() {
      this._get()
    },
    data() {
      return {
        detail: {},
        imgArr: [],
        logis: '',
        reason: '',
        address: '',
        addressList: []
      }
    },
    computed: {
      ...mapState(['openId'])
    },
    methods: {
      async _get() {
        let { data: { code, data } } = await this.$axios({
          url: '/v1/merchant/outdetails',
          method: 'GET',
          params: {
            order: this.$route.params.id,
            id: this.$route.params.mid,
            openid: this.openId
          }
        })
        if (code == 0) {
          data.items[0].imgArr = data.pic.map(item => {
            return item[0]
          })
          this.detail = data.items[0]
          if(this.detail.num) {
            this.getLogistics(this.detail.com, this.detail.num)
          }
          if(this.detail.out_status == 3) {
            this._getAddressList()
          }
        }
      },
      async getLogistics(com, num) {
        let { data: { code, data } } = await this.$axios({
          url: '/v1/platform/expre',
          method: 'GET',
          params: {
            com,
            num
          }
        })
        if(code === 0) {
          if (Array.isArray(data)) {
            let logisArr = data[0].data.map(item => {
              item.day = item.time.substring(5, 10)
              item.time = item.time.substring(11, 16)
              return item
            })
            this.logis = {
              com: data[0].com,
              num: data[0].nu,
              logisArr
            }
          } else {
            this.logis = data
          }
        }
      },
      async _getAddressList() {
        let { data: { code, data } } = await this.$axios({
          url: '/v1/address/list',
          method: 'POST',
          data: {
            size: 1000,
            current: 1,
            openid: this.openId
          }
        })
        if(code === 0) {
          this.addressList = data.items
        }
      },
      async confirm() {
        this.$confirm('是否确认收货?').then(() => {
          this._confirm()
        })
      },
      _confirm: _.throttle(async function() {
        let { data: { code, data } } = await this.$axios({
          url: '/v1/merchant/outconfirm',
          method: 'POST',
          data: {
            order: this.$route.params.id,
            id: this.detail.id,
            openid: this.openId
          }
        })
        if (code === 0) {
          this._refund(data.openid)
        }
      }, 2000, { trailing: false }),
      async _refund(openid) {
        let formData = new FormData()
        formData.append('totalFee', this.detail.subtotal)
        formData.append('out_num', this.detail.out_num)
        formData.append('orderNo', this.$route.params.id)
        formData.append('orderid', this.detail.mout_id)
        formData.append('openid', openid)
        let { data: { code, data } } = await this.$axios({
          url: '/v1/out/refund',
          method: 'POST',
          data: formData
        })
        if(code === 0) {
          this.$toast(data)
          setTimeout(() => {
            this.$router.go(-1)
          }, 1500)
        }
      },
      submit(status) {
        this.$confirm('确认变更状态吗？').then(() => {
          if (status == 2) {
            if (!this.reason) {
              this.$toast('请填写拒绝原因')
              return
            }
          } else {
            if (!this.address) {
              this.$toast('请选择退货地址')
              return
            }
          }
          this._submit(status)
        })
      },
      _submit: _.throttle(async function(status) {
        let { data: { code, data } } = await this.$axios({
          url: '/v1/merchant/trial',
          method: 'POST',
          data: {
            out_status: status,
            reason: this.reason,
            address_id: this.address,
            order: this.$route.params.id,
            id: this.detail.id,
            openid: this.openId
          }
        })
        if (code == 0) {
          this.$toast(data)
          setTimeout(() => {
            this.$router.go(-1)
          }, 1500)
        }
      })
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/assets/css/base.scss';
  .wrapper {
    padding-bottom: 0.6rem;
    min-height: 100vh;
    background: #eee;
  }
  .top {
    text-align: center;
    margin-bottom: 0.2rem;
    padding: 0.6rem 0;
    background: orange;
    color: #fff;
    h3 {
      font-size: 0.32rem;
    }
    h5 {
      font-size: 0.28rem;
    }
  }
  .goods-list {
    padding: 0 0.2rem;
    background: #FFF;
    .title {
      padding: 0.1rem 0;
      font-size: 0.24rem;
      border-bottom: 1px solid $bgGray;
    }
  }
  .mid {
    margin-top: 0.2rem;
    padding: 0 0.2rem;
    background: #fff;
    li {
      display: flex;
      padding: 0.2rem 0.1rem 0.2rem 0;
      border-bottom: 1px solid $bgGray;
      font-size: 0.28rem;
      .title, .value {
        flex: 1;
        display: block;
      }
      .value {
        flex: 1;
        text-align: right;
        &.price {
          color: $colorRed;
          font-size: 0.32rem;
        }
      }
    }
  }
  .bottom {
    margin-top: 0.2rem;
    padding: 0.2rem;
    background:#fff;
    p {
      margin-bottom: 0.1rem;
      font-size: 0.24rem;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  .return {
    margin-top: 0.2rem;
    padding: 0 0.2rem;
    font-size: 0.24rem;
    background: #fff;
    .bar {
      margin-top: 0.2rem;
      background: #fff;
      padding: 0.2rem;
      text-align: center;
      button {
        padding: 0.2rem;
        border:none;
        border-radius: 5px;
        color: #fff;
        font-size: 0.28rem;
        margin: 0 0.2rem;
        display: inline-block;
        width: 2.5rem;
        &.reject {
          background: orange;
        }
        &.resolve {
          background: $colorRed;
        }
      }
    }
  }
  .bar {
    margin-top: 0.2rem;
    background: #fff;
    padding: 0.2rem;
    text-align: right;
    .back {
      padding: 0.1rem;
      border: 1px solid $colorGray;
      background: $bgGray;
      border-radius: 20px;
    }
  }
  .return-item {
    display: flex;
    // align-items: center;
    padding: 0.2rem 0;
    border-bottom: 1px solid $bgGray;
    p {
      flex: 0 0 1.5rem;
    }
    .text {
      flex: 1;
    }
    span {
      display: block;
      flex: 0 0 1.6rem;
      width: 1.6rem;
      margin-right: 0.4rem;
    }
    input, select {
      font-size: 0.28rem;
    }
    select {
      font-size: 0.24rem;
      background: #fff;
    }
    .img-wrapper {
      flex: 1;
      .img {
        display: inline-block;
        margin-right: 0.2rem;
        width: 1.5rem;
        height: 1.5rem;
        vertical-align: middle;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
</style>
